import React, {Component, PropTypes} from 'react';

import {  Form, Input, Select, Icon, Button, Row, Col, Card } from 'antd';

const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;

var Simditor = require('simditor');
var $ = require('jquery');
import '../../../../node_modules/simditor/styles/simditor.css';

export class TermForm extends Component {


  constructor (props) {
    super(props);
  }

  componentWillReceiveProps (props) {

    console.log(props.formValues,'sssssssssssssss');

    if(props.formValues && this.props.formValues !== props.formValues){
      this.props.form.setFieldsValue(props.formValues);
      this.editor.setValue(props.formValues.post_content || '');
    }
  }

  componentDidMount(){

    var textbox = this.refs.textarea;
    this.editor = new Simditor({
      textarea: $(textbox),
      upload:{
        url: '/admin/post/upload',
        params: null,
        fileKey: 'file',
        connectionCount: 3,
        leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
      }
    });
  }

  handleSubmit () {
    let fields = this.props.form.getFieldsValue();
    if(this.props.formValues && this.props.formValues._id){
      fields._id = this.props.formValues._id;
    }

    fields.post_content = this.editor.getValue();
    console.log(fields);
    this.props.handleOK(fields);
  }

  render() {

    const { getFieldDecorator } = this.props.form;
    const {termlist} = this.props;
    const defaultSelect = termlist.length > 0 ? termlist[0]['_id'] : '';

    return (
      <div>
        <Form horizontal onSubmit={this.handleSubmit}>
          <Row>
            <Col span={18}>
              <FormItem
                hasFeedback
              >
                {getFieldDecorator('post_title', {
                  rules: [{ required: true, message: '文章标题不能为空!' }],
                })(
                  <Input placeholder="填写文章标题" autoComplete="off" />
                )}
              </FormItem>

              <FormItem
                hasFeedback
              >
                {getFieldDecorator('post_slug', {
                  rules: [{
                    required: true, message: '缩略名不能为空!!',
                  }],
                })(
                  <Input addonBefore="Http://www.wenmang.me/page/" addonAfter=".html" placeholder="文章缩略名" autoComplete="off" />
                )}
              </FormItem>


              <textarea ref="textarea" />

            </Col>
            <Col span={6} style={{paddingLeft:'20px'}}>

              <Card title="分类管理">
                <FormItem
                  label="所属分类"
                  hasFeedback
                >
                  {getFieldDecorator('post_term', {
                    initialValue : defaultSelect,
                    rules: [
                      { required: true, message: 'Please select your country!' },
                    ],
                  })(
                    <Select>
                      {
                        termlist.map((val)=>{
                          return <Option value={val._id} key={val._id}>{val.term_name}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Card>

              <Card title="发布" className="mt20">
                <Button type="primary" size="large" onClick={this.handleSubmit.bind(this)}>立即发布</Button>
                <Button type="ghost" size="large" style={{marginLeft:'10px'}}>保存草稿</Button>
              </Card>

            </Col>
          </Row>
        </Form>
      </div>
    )
  }

}

export default createForm()(TermForm);